<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站底部弹出全屏选择话题</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #007bff;
      --secondary: #6c757d;
      --light: #f8f9fa;
      --dark: #343a40;
      --white: #ffffff;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      --border: #eee;
      
      /* 主题色 */
      --theme1: #1877F2; /* 社交蓝 */
      --theme2: #E4405F; /* 活力粉 */
      --theme3: #00C853; /* 清新绿 */
      --theme4: #212529; /* 商务黑 */
      --theme5: #FF9800; /* 温暖橙 */
      --theme6: #9C27B0; /* 个性紫 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      position: relative;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    
    /* 示例内容区 */
    .demo-content {
      padding: 20px;
    }
    
    .page-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    
    .action-card {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: var(--shadow);
      text-align: center;
      margin-bottom: 20px;
    }
    
    .action-icon {
      font-size: 40px;
      color: var(--primary);
      margin-bottom: 15px;
    }
    
    .action-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    
    .action-desc {
      color: #666;
      font-size: 14px;
      margin-bottom: 20px;
    }
    
    .open-btn {
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .open-btn:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }
    
    /* 选择话题弹窗 */
    .topic-select-modal {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--white);
      z-index: 1050;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      max-width: 420px;
      margin: 0 auto;
      height: 90vh;
      border-radius: 20px 20px 0 0;
      display: flex;
      flex-direction: column;
    }
    
    .topic-select-modal.active {
      transform: translateY(0);
    }
    
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1040;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    
    /* 弹窗头部 */
    .modal-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .modal-actions {
      display: flex;
      gap: 10px;
    }
    
    .modal-btn {
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      border: none;
    }
    
    .cancel-btn {
      background-color: transparent;
      color: #666;
    }
    
    .confirm-btn {
      background-color: var(--primary);
      color: white;
    }
    
    /* 搜索区域 */
    .search-container {
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
    }
    
    .search-input {
      width: 100%;
      padding: 12px 15px;
      border-radius: 8px;
      border: 1px solid var(--border);
      font-size: 15px;
      background-color: #f5f5f5;
      outline: none;
      transition: all 0.2s;
    }
    
    .search-input:focus {
      border-color: var(--primary);
      background-color: white;
    }
    
    /* 话题列表 */
    .topic-list-container {
      flex: 1;
      overflow-y: auto;
    }
    
    .list-section {
      margin-bottom: 15px;
    }
    
    .section-header {
      padding: 10px 20px;
      font-size: 12px;
      font-weight: 600;
      color: #666;
      background-color: #f5f5f5;
    }
    
    /* 话题项样式 - 标签式 */
    .topic-tags {
      padding: 15px 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    
    .topic-tag {
      padding: 6px 14px;
      background-color: #f5f5f5;
      border-radius: 20px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    
    .topic-tag.selected {
      background-color: var(--primary);
      color: white;
    }
    
    .topic-tag .tag-count {
      font-size: 12px;
      opacity: 0.8;
    }
    
    /* 话题项样式 - 列表式 */
    .topic-items {
      padding: 5px 0;
    }
    
    .topic-item {
      padding: 12px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: background-color 0.2s;
      border-bottom: 1px solid var(--border);
    }
    
    .topic-item:hover {
      background-color: #f9f9f9;
    }
    
    .topic-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .topic-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background-color: rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
    }
    
    .topic-details {
      display: flex;
      flex-direction: column;
    }
    
    .topic-name {
      font-weight: 500;
      font-size: 16px;
    }
    
    .topic-desc {
      font-size: 12px;
      color: #666;
    }
    
    .topic-stats {
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 12px;
      color: #666;
    }
    
    .topic-check {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }
    
    .topic-item.selected .topic-check {
      background-color: var(--primary);
      border-color: var(--primary);
      color: white;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 主题样式 */
    .theme1 { --primary: var(--theme1); }
    .theme2 { --primary: var(--theme2); }
    .theme3 { --primary: var(--theme3); }
    .theme4 { --primary: var(--theme4); }
    .theme5 { --primary: var(--theme5); }
    .theme6 { --primary: var(--theme6); }
    
    /* 主题1：社交蓝 */
    .theme1 .topic-select-modal {
      background-color: #f9fafd;
    }
    
    .theme1 .section-header,
    .theme1 .topic-tag {
      background-color: #edf2fa;
    }
    
    /* 主题2：活力粉 */
    .theme2 .topic-select-modal {
      background-color: #fff5f8;
    }
    
    .theme2 .section-header,
    .theme2 .topic-tag {
      background-color: #ffe6ec;
    }
    
    /* 主题3：清新绿 */
    .theme3 .topic-select-modal {
      background-color: #f0fff4;
    }
    
    .theme3 .section-header,
    .theme3 .topic-tag {
      background-color: #e6f7ee;
    }
    
    /* 主题4：商务黑 */
    .theme4 {
      --border: #333;
      --dark: white;
    }
    
    .theme4 .topic-select-modal,
    .theme4 .search-input,
    .theme4 .topic-item:hover,
    .theme4 .topic-tag {
      background-color: #121212;
    }
    
    .theme4 .section-header {
      background-color: #1e1e1e;
      color: #aaa;
    }
    
    .theme4 .topic-name,
    .theme4 .modal-title {
      color: white;
    }
    
    .theme4 .topic-desc,
    .theme4 .topic-stats,
    .theme4 .cancel-btn,
    .theme4 .topic-tag {
      color: #aaa;
    }
    
    .theme4 .search-input {
      background-color: #1e1e1e;
      border-color: #333;
      color: white;
    }
    
    .theme4 .topic-icon {
      background-color: rgba(255,255,255,0.1);
    }
    
    /* 主题5：温暖橙 */
    .theme5 .topic-select-modal {
      background-color: #fff8e6;
    }
    
    .theme5 .section-header,
    .theme5 .topic-tag {
      background-color: #fff2cc;
    }
    
    /* 主题6：个性紫 */
    .theme6 .topic-select-modal {
      background-color: #f3e5f5;
    }
    
    .theme6 .section-header,
    .theme6 .topic-tag {
      background-color: #e1bee7;
    }
    
    /* 动画 */
    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }
    
    .selected-animation {
      animation: fadeIn 0.3s;
    }
    
    /* 响应式 */
    @media (max-width: 360px) {
      .topic-icon {
        width: 32px;
        height: 32px;
      }
      
      .topic-name {
        font-size: 15px;
      }
      
      .topic-tag {
        padding: 5px 12px;
        font-size: 13px;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择话题样式</div>
    <div class="switcher-option active" data-style="1">社交蓝-标签式</div>
    <div class="switcher-option" data-style="2">活力粉-标签式</div>
    <div class="switcher-option" data-style="3">清新绿-列表式</div>
    <div class="switcher-option" data-style="4">商务黑-列表式</div>
    <div class="switcher-option" data-style="5">温暖橙-混合式</div>
    <div class="switcher-option" data-style="6">个性紫-混合式</div>
  </div>
  
  <div class="container">
    <div class="demo-content">
      <h2 class="page-title">选择话题示例</h2>
      
      <div class="action-card">
        <div class="action-icon">
          <i class="fa fa-hashtag"></i>
        </div>
        <h3 class="action-title">发布带话题</h3>
        <p class="action-desc">选择合适的话题，让更多人看到你的内容</p>
        <button class="open-btn" data-target="topic1">选择话题</button>
      </div>
      
      <div class="action-card">
        <div class="action-icon">
          <i class="fa fa-comments"></i>
        </div>
        <h3 class="action-title">加入话题讨论</h3>
        <p class="action-desc">选择感兴趣的话题，参与热门讨论</p>
        <button class="open-btn" data-target="topic2">浏览话题</button>
      </div>
      
      <div class="action-card">
        <div class="action-icon">
          <i class="fa fa-bookmark"></i>
        </div>
        <h3 class="action-title">关注话题</h3>
        <p class="action-desc">选择喜欢的话题，获取最新动态</p>
        <button class="open-btn" data-target="topic3">关注话题</button>
      </div>
    </div>
    
    <!-- 选择话题弹窗1 - 社交蓝-标签式 -->
    <div class="topic-select-modal theme1" id="topic1">
      <div class="modal-header">
        <h3 class="modal-title">选择话题（0/5）</h3>
        <div class="modal-actions">
          <button class="modal-btn cancel-btn">取消</button>
          <button class="modal-btn confirm-btn">确定</button>
        </div>
      </div>
      
      <div class="search-container">
        <input type="text" class="search-input" placeholder="搜索话题...">
      </div>
      
      <div class="topic-list-container">
        <div class="list-section">
          <div class="section-header">推荐话题</div>
          <div class="topic-tags">
            <div class="topic-tag">
              <span>#旅行</span>
              <span class="tag-count">12.5k</span>
            </div>
            <div class="topic-tag">
              <span>#美食</span>
              <span class="tag-count">24.8k</span>
            </div>
            <div class="topic-tag">
              <span>#摄影</span>
              <span class="tag-count">8.3k</span>
            </div>
            <div class="topic-tag">
              <span>#电影</span>
              <span class="tag-count">15.2k</span>
            </div>
            <div class="topic-tag">
              <span>#音乐</span>
              <span class="tag-count">10.7k</span>
            </div>
            <div class="topic-tag">
              <span>#读书</span>
              <span class="tag-count">6.4k</span>
            </div>
            <div class="topic-tag">
              <span>#运动</span>
              <span class="tag-count">9.1k</span>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">热门话题</div>
          <div class="topic-tags">
            <div class="topic-tag">
              <span>#今日热点</span>
              <span class="tag-count">32.6k</span>
            </div>
            <div class="topic-tag">
              <span>#科技新闻</span>
              <span class="tag-count">18.9k</span>
            </div>
            <div class="topic-tag">
              <span>#职场经验</span>
              <span class="tag-count">7.5k</span>
            </div>
            <div class="topic-tag">
              <span>#生活技巧</span>
              <span class="tag-count">11.2k</span>
            </div>
            <div class="topic-tag">
              <span>#健康养生</span>
              <span class="tag-count">5.8k</span>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">兴趣话题</div>
          <div class="topic-tags">
            <div class="topic-tag">
              <span>#摄影技巧</span>
              <span class="tag-count">3.2k</span>
            </div>
            <div class="topic-tag">
              <span>#手机摄影</span>
              <span class="tag-count">4.7k</span>
            </div>
            <div class="topic-tag">
              <span>#旅行攻略</span>
              <span class="tag-count">6.3k</span>
            </div>
            <div class="topic-tag">
              <span>#美食制作</span>
              <span class="tag-count">5.1k</span>
            </div>
            <div class="topic-tag">
              <span>#经典电影</span>
              <span class="tag-count">2.8k</span>
            </div>
            <div class="topic-tag">
              <span>#独立音乐</span>
              <span class="tag-count">1.9k</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 选择话题弹窗2 - 活力粉-标签式 -->
    <div class="topic-select-modal theme2" id="topic2">
      <div class="modal-header">
        <h3 class="modal-title">热门话题</h3>
        <div class="modal-actions">
          <button class="modal-btn cancel-btn">取消</button>
          <button class="modal-btn confirm-btn">参与</button>
        </div>
      </div>
      
      <div class="search-container">
        <input type="text" class="search-input" placeholder="查找话题...">
      </div>
      
      <div class="topic-list-container">
        <div class="list-section">
          <div class="section-header">潮流时尚</div>
          <div class="topic-tags">
            <div class="topic-tag">
              <span>#OOTD</span>
              <span class="tag-count">45.2k</span>
            </div>
            <div class="topic-tag">
              <span>#美妆分享</span>
              <span class="tag-count">38.7k</span>
            </div>
            <div class="topic-tag">
              <span>#发型推荐</span>
              <span class="tag-count">15.6k</span>
            </div>
            <div class="topic-tag">
              <span>#配饰搭配</span>
              <span class="tag-count">9.3k</span>
            </div>
            <div class="topic-tag">
              <span>#街拍</span>
              <span class="tag-count">22.1k</span>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">生活方式</div>
          <div class="topic-tags">
            <div class="topic-tag">
              <span>#居家好物</span>
              <span class="tag-count">18.4k</span>
            </div>
            <div class="topic-tag">
              <span>#咖啡文化</span>
              <span class="tag-count">7.8k</span>
            </div>
            <div class="topic-tag">
              <span>#手账</span>
              <span class="tag-count">12.3k</span>
            </div>
            <div class="topic-tag">
              <span>#极简生活</span>
              <span class="tag-count">5.6k</span>
            </div>
            <div class="topic-tag">
              <span>#宠物日常</span>
              <span class="tag-count">28.9k</span>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">创意灵感</div>
          <div class="topic-tags">
            <div class="topic-tag">
              <span>#插画</span>
              <span class="tag-count">9.2k</span>
            </div>
            <div class="topic-tag">
              <span>#设计</span>
              <span class="tag-count">14.7k</span>
            </div>
            <div class="topic-tag">
              <span>#手工制作</span>
              <span class="tag-count">8.5k</span>
            </div>
            <div class="topic-tag">
              <span>#创意摄影</span>
              <span class="tag-count">6.3k</span>
            </div>
            <div class="topic-tag">
              <span>#写作</span>
              <span class="tag-count">4.9k</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 选择话题弹窗3 - 清新绿-列表式 -->
    <div class="topic-select-modal theme3" id="topic3">
      <div class="modal-header">
        <h3 class="modal-title">话题分类</h3>
        <div class="modal-actions">
          <button class="modal-btn cancel-btn">取消</button>
          <button class="modal-btn confirm-btn">关注</button>
        </div>
      </div>
      
      <div class="search-container">
        <input type="text" class="search-input" placeholder="搜索话题...">
      </div>
      
      <div class="topic-list-container">
        <div class="list-section">
          <div class="section-header">自然与户外</div>
          <div class="topic-items">
            <div class="topic-item">
              <div class="topic-info">
                <div class="topic-icon">
                  <i class="fa fa-tree"></i>
                </div>
                <div class="topic-details">
                  <div class="topic-name">徒步旅行</div>
                  <div class="topic-desc">分享徒步路线和户外经验</div>
                </div>
              </div>
              <div class="topic-stats">
                <span><i class="fa fa-user-o"></i> 12.5k</span>
                <span><i class="fa fa-comment-o"></i> 8.3k</span>
                <div class="topic-check">
                  <i class="fa fa-check fa-xs"></i>
                </div>
              </div>
            </div>
            <div class="topic-item">
              <div class="topic-info">
                <div class="topic-icon">
                  <i class="fa fa-leaf"></i>
                </div>
                <div class="topic-details">
                  <div class="topic-name">环保生活</div>
                  <div class="topic-desc">可持续发展与环保行动</div>
                </div>
              </div>
              <div class="topic-stats">
                <span><i class="fa fa-user-o"></i> 8.7k</span>
                <span><i class="fa fa-comment-o"></i> 5.2k</span>
                <div class="topic-check">
                  <i class="fa fa-check fa-xs"></i>
                </div>
              </div>
            </div>
            <div class="topic-item">
              <div class="topic-info">
                <div class="topic-icon">
                  <i class="fa fa-camera"></i>
                </div>
                <div class="topic-details">
                  <div class="topic-name">自然摄影</div>
                  <div class="topic-desc">记录大自然的美丽瞬间</div>
                </div>
              </div>
              <div class="topic-stats">
                <span><i class="fa fa-user-o"></i> 6.3k</span>
                <span><i class="fa fa-comment-o"></i> 3.8k</span>
                <div class="topic-check">
                  <i class="fa fa-check fa-xs"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">健康与养生</div>
          <div class="topic-items">
            <div class="topic-item">
              <div class="topic-info">
                <div class="topic-icon">
                  <i class="fa fa-lemon-o"></i>
                </div>
                <div class="topic-details">
                  <div class="topic-name">素食主义</div>
                  <div class="topic-desc">素食生活方式与健康饮食</div>
                </div>
              </div>
              <div class="topic-stats">
                <span><i class="fa fa-user-o"></i> 9.2k</span>
                <span><i class="fa fa-comment-o"></i> 4.7k</span>
                <div class="topic-check">
                  <i class="fa fa-check fa-xs"></i>
                </div>
              </div>
            </div>
            <div class="topic-item">
              <div class="topic-info">
                <div class="topic-icon">
                  <i class="fa fa-heartbeat"></i>
                </div>
                <div class="topic-details">
                  <div class="topic-name">瑜伽练习</div>
                  <div class="topic-desc">瑜伽姿势与冥想技巧</div>
                </div>
              </div>
              <div class="topic-stats">
                <span><i class="fa fa-user-o"></i> 15.8k</span>
                <span><i class="fa fa-comment-o"></i> 7.3k</span>
                <div class="topic-check">
                  <i class="fa fa-check fa-xs"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 选择话题弹窗4 - 商务黑-列表式 -->
    <div class="topic-select-modal theme4" id="topic4">
      <div class="modal-header">
        <h3 class="modal-title">职业话题</h3>
        <div class="modal-actions">
          <button class="modal-btn cancel-btn">取消</button>
          <button class="modal-btn confirm-btn">加入</button>
        </div>
      </div>
      
      <div class="search-container">
        <input type="text" class="search-input" placeholder="搜索行业话题...">
      </div>
      
      <div class="topic-list-container">
        <div class="list-section">
          <div class="section-header">科技与互联网</div>
          <div class="topic-items">
            <div class="topic-item">
              <div class="topic-info">
                <div class="topic-icon">
                  <i class="fa fa-code"></i>
                </div>
                <div class="topic-details">
                  <div class="topic-name">前端开发</div>
                  <div class="topic-desc">Web前端技术与框架讨论</div>
                </div>
              </div>
              <div class="topic-stats">
                <span><i class="fa fa-user-o"></i> 24.7k</span>
                <span><i class="fa fa-comment-o"></i> 18.3k</span>
                <div class="topic-check">
                  <i class="fa fa-check fa-xs"></i>
                </div>
              </div>
            </div>
            <div class="topic-item">
              <div class="topic-info">
                <div class="topic-icon">
                  <i class="fa fa-mobile"></i>
                </div>
                <div class="topic-details">
                  <div class="topic-name">移动开发</div>
                  <div class="topic-desc">iOS与Android开发技术</div>
                </div>
              </div>
              <div class="topic-stats">
                <span><i class="fa fa-user-o"></i> 19.5k</span>
                <span><i class="fa fa-comment-o"></i> 12.8k</span>
                <div class="topic-check">
                  <i class="fa fa-check fa-xs"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">创业与管理</div>
          <div class="topic-items">
            <div class="topic-item">
              <div class="topic-info">
                <div class="topic-icon">
                  <i class="fa fa-lightbulb-o"></i>
                </div>
                <div class="topic-details">
                  <div class="topic-name">创业经验</div>
                  <div class="topic-desc">分享创业路上的故事与经验</div>
                </div>
              </div>
              <div class="topic-stats">
                <span><i class="fa fa-user-o"></i> 15.2k</span>
                <span><i class="fa fa-comment-o"></i> 9.7k</span>
                <div class="topic-check">
                  <i class="fa fa-check fa-xs"></i>
                </div>
              </div>
            </div>
            <div class="topic-item">
              <div class="topic-info">
                <div class="topic-icon">
                  <i class="fa fa-briefcase"></i>
                </div>
                <div class="topic-details">
                  <div class="topic-name">项目管理</div>
                  <div class="topic-desc">高效团队管理与项目执行</div>
                </div>
              </div>
              <div class="topic-stats">
                <span><i class="fa fa-user-o"></i> 11.8k</span>
                <span><i class="fa fa-comment-o"></i> 7.5k</span>
                <div class="topic-check">
                  <i class="fa fa-check fa-xs"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 选择话题弹窗5 - 温暖橙-混合式 -->
    <div class="topic-select-modal theme5" id="topic5">
      <div class="modal-header">
        <h3 class="modal-title">生活话题</h3>
        <div class="modal-actions">
          <button class="modal-btn cancel-btn">取消</button>
          <button class="modal-btn confirm-btn">选择</button>
        </div>
      </div>
      
      <div class="search-container">
        <input type="text" class="search-input" placeholder="搜索生活话题...">
      </div>
      
      <div class="topic-list-container">
        <div class="list-section">
          <div class="section-header">热门标签</div>
          <div class="topic-tags">
            <div class="topic-tag">
              <span>#周末去哪儿</span>
              <span class="tag-count">22.3k</span>
            </div>
            <div class="topic-tag">
              <span>#美食探店</span>
              <span class="tag-count">34.7k</span>
            </div>
            <div class="topic-tag">
              <span>#居家料理</span>
              <span class="tag-count">18.5k</span>
            </div>
            <div class="topic-tag">
              <span>#城市漫步</span>
              <span class="tag-count">12.9k</span>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">精选话题</div>
          <div class="topic-items">
            <div class="topic-item">
              <div class="topic-info">
                <div class="topic-icon">
                  <i class="fa fa-cutlery"></i>
                </div>
                <div class="topic-details">
                  <div class="topic-name">家常菜食谱</div>
                  <div class="topic-desc">简单易做的家常美食分享</div>
                </div>
              </div>
              <div class="topic-stats">
                <span><i class="fa fa-user-o"></i> 28.6k</span>
                <span><i class="fa fa-comment-o"></i> 15.2k</span>
                <div class="topic-check">
                  <i class="fa fa-check fa-xs"></i>
                </div>
              </div>
            </div>
            <div class="topic-item">
              <div class="topic-info">
                <div class="topic-icon">
                  <i class="fa fa-home"></i>
                </div>
                <div class="topic-details">
                  <div class="topic-name">家居布置</div>
                  <div class="topic-desc">小空间也有大作为</div>
                </div>
              </div>
              <div class="topic-stats">
                <span><i class="fa fa-user-o"></i> 17.3k</span>
                <span><i class="fa fa-comment-o"></i> 9.8k</span>
                <div class="topic-check">
                  <i class="fa fa-check fa-xs"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 选择话题弹窗6 - 个性紫-混合式 -->
    <div class="topic-select-modal theme6" id="topic6">
      <div class="modal-header">
        <h3 class="modal-title">创意话题</h3>
        <div class="modal-actions">
          <button class="modal-btn cancel-btn">取消</button>
          <button class="modal-btn confirm-btn">发布</button>
        </div>
      </div>
      
      <div class="search-container">
        <input type="text" class="search-input" placeholder="搜索创意话题...">
      </div>
      
      <div class="topic-list-container">
        <div class="list-section">
          <div class="section-header">热门标签</div>
          <div class="topic-tags">
            <div class="topic-tag">
              <span>#创意手工</span>
              <span class="tag-count">8.7k</span>
            </div>
            <div class="topic-tag">
              <span>#艺术设计</span>
              <span class="tag-count">12.3k</span>
            </div>
            <div class="topic-tag">
              <span>#摄影灵感</span>
              <span class="tag-count">9.5k</span>
            </div>
            <div class="topic-tag">
              <span>#独立音乐</span>
              <span class="tag-count">6.8k</span>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">专题话题</div>
          <div class="topic-items">
            <div class="topic-item">
              <div class="topic-info">
                <div class="topic-icon">
                  <i class="fa fa-paint-brush"></i>
                </div>
                <div class="topic-details">
                  <div class="topic-name">插画创作</div>
                  <div class="topic-desc">分享插画作品与创作心得</div>
                </div>
              </div>
              <div class="topic-stats">
                <span><i class="fa fa-user-o"></i> 7.2k</span>
                <span><i class="fa fa-comment-o"></i> 4.3k</span>
                <div class="topic-check">
                  <i class="fa fa-check fa-xs"></i>
                </div>
              </div>
            </div>
            <div class="topic-item">
              <div class="topic-info">
                <div class="topic-icon">
                  <i class="fa fa-film"></i>
                </div>
                <div class="topic-details">
                  <div class="topic-name">短片拍摄</div>
                  <div class="topic-desc">手机也能拍出好作品</div>
                </div>
              </div>
              <div class="topic-stats">
                <span><i class="fa fa-user-o"></i> 5.8k</span>
                <span><i class="fa fa-comment-o"></i> 3.6k</span>
                <div class="topic-check">
                  <i class="fa fa-check fa-xs"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 遮罩层 -->
  <div class="modal-overlay"></div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = '1';
    let activeModal = null;
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const topicSelectModals = {
      '1': document.getElementById('topic1'),
      '2': document.getElementById('topic2'),
      '3': document.getElementById('topic3'),
      '4': document.getElementById('topic4'),
      '5': document.getElementById('topic5'),
      '6': document.getElementById('topic6')
    };
    const modalOverlay = document.querySelector('.modal-overlay');
    const openButtons = document.querySelectorAll('.open-btn');
    const cancelButtons = document.querySelectorAll('.cancel-btn');
    const confirmButtons = document.querySelectorAll('.confirm-btn');
    const topicTags = document.querySelectorAll('.topic-tag');
    const topicItems = document.querySelectorAll('.topic-item');
    
    // 初始化
    function init() {
      // 样式切换事件
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = this.getAttribute('data-style');
          switchStyle(style);
        });
      });
      
      // 打开弹窗
      openButtons.forEach(btn => {
        btn.addEventListener('click', function() {
          const target = this.getAttribute('data-target');
          // 根据当前样式选择对应的弹窗
          const modalId = `topic${currentStyle}`;
          openModal(document.getElementById(modalId) || document.getElementById(target));
        });
      });
      
      // 取消按钮
      cancelButtons.forEach(btn => {
        btn.addEventListener('click', closeModal);
      });
      
      // 确认按钮
      confirmButtons.forEach(btn => {
        btn.addEventListener('click', function() {
          const modal = this.closest('.topic-select-modal');
          const selectedCount = getSelectedCount(modal);
          const actionText = this.textContent;
          
          if (selectedCount > 0) {
            alert(`已${actionText} ${selectedCount}个话题`);
            closeModal();
          } else {
            alert('请至少选择一个话题');
          }
        });
      });
      
      // 点击遮罩层关闭
      modalOverlay.addEventListener('click', closeModal);
      
      // 话题标签选择
      topicTags.forEach(tag => {
        tag.addEventListener('click', function() {
          toggleTopicSelection(this);
          
          // 更新计数
          updateSelectedCount(this.closest('.topic-select-modal'));
        });
      });
      
      // 话题项选择
      topicItems.forEach(item => {
        item.addEventListener('click', function(e) {
          // 避免点击复选框时触发两次
          if (!e.target.closest('.topic-check')) {
            toggleTopicSelection(this);
            updateSelectedCount(this.closest('.topic-select-modal'));
          }
        });
        
        // 复选框点击
        const checkBox = item.querySelector('.topic-check');
        if (checkBox) {
          checkBox.addEventListener('click', function(e) {
            e.stopPropagation();
            toggleTopicSelection(item);
            updateSelectedCount(item.closest('.topic-select-modal'));
          });
        }
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
      
      // 如果有打开的弹窗，更新弹窗样式
      if (activeModal) {
        const newModalId = `topic${style}`;
        const newModal = document.getElementById(newModalId);
        if (newModal) {
          closeModal();
          setTimeout(() => openModal(newModal), 300);
        }
      }
    }
    
    // 打开弹窗
    function openModal(modal) {
      if (!modal) return;
      
      activeModal = modal;
      modal.classList.add('active');
      modalOverlay.classList.add('active');
      
      // 更新标题中的选中数量
      updateSelectedCount(modal);
    }
    
    // 关闭弹窗
    function closeModal() {
      if (activeModal) {
        activeModal.classList.remove('active');
        activeModal = null;
      }
      modalOverlay.classList.remove('active');
    }
    
    // 切换话题选择状态
    function toggleTopicSelection(element) {
      element.classList.toggle('selected');
      
      // 添加选中动画
      const checkElement = element.querySelector('.topic-check') || element;
      checkElement.classList.add('selected-animation');
      setTimeout(() => checkElement.classList.remove('selected-animation'), 300);
    }
    
    // 获取选中数量
    function getSelectedCount(modal) {
      const tagCount = modal.querySelectorAll('.topic-tag.selected').length;
      const itemCount = modal.querySelectorAll('.topic-item.selected').length;
      return tagCount + itemCount;
    }
    
    // 更新选中数量
    function updateSelectedCount(modal) {
      const titleElement = modal.querySelector('.modal-title');
      if (!titleElement) return;
      
      const selectedCount = getSelectedCount(modal);
      
      // 如果标题包含数字计数格式，则更新
      if (titleElement.textContent.includes('(')) {
        titleElement.textContent = titleElement.textContent.replace(/\(\d+\/\d+\)/, `(${selectedCount}/5)`);
      }
    }
    
    // 启动
    init();
  </script>
</body>
</html>
